<template>
    <div class="pageContainer">
        <div class="" v-for="moudule in moudules" :key="moudule.id">
            <mt-search v-if="moudule.type==='商品搜索'" ></mt-search>
            <magic v-if="moudule.type==='魔方'"  :props="moudule.props"></magic>
            <products v-if="moudule.type==='商品'"  :props="moudule.props"></products>
            <quxia-swiper v-if="moudule.type==='图片广告'"  :props="moudule.props"></quxia-swiper>
            <text-bar v-if="moudule.type==='文本'"  :props="moudule.props"></text-bar>
        </div>
    </div>
</template>
<script>
    import jquery from 'jquery'
    import {base_url} from "../../config";

    export default {
        data() {
            return {
                moudules: [],
                form: {
                    table: [],
                    from: 0,
                    tableLoading: false,
                    total: 0,
                },

            }
        },
        components:{
            'magic':()=>import('./magic.vue'),
            'products':()=>import('./products.vue'),
            'quxia-swiper':()=>import('./swiper.vue'),
            'text-bar':()=>import('./text-bar.vue')
        },
        mounted() {
            this.getModules()
        },
        methods: {
            getModules() {
                var self = this
                return jquery.get(`${base_url}/redis/get?key=${this.$route.query.id}`).then(res => {
                    self.moudules = res.result && res.result.resultList
                    return res.result
                })
            }
        }
    }
</script>
<style lang="scss">
    .mint-search{
        height: 54px!important;
    }
</style>
<style lang="scss" scoped>

</style>
